/**
 * 依赖包漏洞检测扫描结果-issue列表
 */

import React from 'react';
import PropTypes from 'prop-types';
import ListEmpty from 'atComponents/ListEmpty';
import IssueList from './list';
import { Button } from '@teamix/ui';
import exceed from 'utils/apimap';
import dayjs from 'dayjs';
import './index.scss';
import intl from '../../locale';

const prefix = 'dependency-build-issue';
export default class DependencyBuildResultIssues extends React.Component {
  static propTypes = {
    issues: PropTypes.array,
    issueFilter: PropTypes.string,
  };

  static defaultProps = {
    issues: [],
    issueFilter: '',
  };

  state = {
    isStarting: false,
  };

  restartScan = () => {
    const { pathResource } = window.FORCE;
    const { build } = this.props;
    if (this.state.isStarting) {
      return;
    }
    this.setState({
      isStarting: true,
    });

    exceed
      .fetch({
        api: 'projects.builds.manual.retry',
        params: {
          projectId: pathResource.id,
        },

        data: {
          build_result_id: build.id,
        },
      })
      .then(() => {
        this.setState({
          isStarting: false,
        });

        window.location.reload();
      })
      .fail(() => {
        this.setState({
          isStarting: false,
        });
      });
  };

  renderEmpty = ({ issueFilter, problem, issues }) => {
    const { build, isNeedRestart } = this.props;
    const { isStarting } = this.state;
    // 30天前触发
    const isLargethan30 = dayjs(build.gmt_create).add(30, 'day') < dayjs();
    if (
      issues.length === 0 &&
      ['FAIL', 'WARNNING'].includes(build.state.toUpperCase()) &&
      isLargethan30
    ) {
      return (
        <div className="retry-scan-list-empty">
          <ListEmpty
            content={
              <div>
                {intl.get({
                  id: 'code-assets.components.dependencyBuildResultIssues.DetectionMoreThanDaysNot',
                  defaultMessage: '检测已超30天，不支持查看问题详情',
                })}
              </div>
            }
            imgType="yundou-line"
            btns={[
              isNeedRestart && (
                <Button
                  type="primary"
                  style={{ width: 88, marginTop: 8 }}
                  loading={isStarting}
                  size="small"
                  onClick={() => {
                    this.restartScan();
                  }}
                >
                  {intl.get({
                    id: 'code-assets.components.dependencyBuildResultIssues.ReCheck',
                    defaultMessage: '重新检测',
                  })}
                </Button>
              ),
            ]}
          />
        </div>
      );
    }

    const content = issueFilter
      ? intl.get(
          {
            id: 'code-assets.components.dependencyBuildResultIssues.ProblemProblemNotDetected',
            defaultMessage: '未检测出 {problem} 问题',
          },
          { problem },
        )
      : intl.get({
          id: 'code-assets.components.dependencyBuildResultIssues.NoProblemDetected',
          defaultMessage: '未检测出问题',
        });
    return (
      <div className="retry-scan-list-empty">
        <ListEmpty content={content} imgType="yundou-line" size="small" />
      </div>
    );
  };

  render() {
    const { issues, issueFilter } = this.props;
    const filteredIssues = issues.filter((file) => {
      if (!issueFilter || file.issue_count_info[issueFilter]) {
        return true;
      }
      return false;
    });

    let problem;
    if (issueFilter) {
      problem = issueFilter.replace(issueFilter[0], issueFilter[0].toUpperCase());
    }

    return (
      <div className={`${prefix} ${filteredIssues.length ? '' : 'no-border'}`}>
        <div>
          <div style={{ display: filteredIssues.length ? 'block' : 'none' }}>
            <IssueList issueFilter={issueFilter} filteredIssues={filteredIssues} {...this.props} />
          </div>
          {!filteredIssues.length &&
            this.renderEmpty({
              issueFilter,
              problem,
              issues,
            })}
        </div>
      </div>
    );
  }
}
